
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>

</head>
<body>
<div id="app1">
  <el-page-header @back="goBack" content="新闻管理页面">
  </el-page-header>
</div>
<div id="app">

  <!--搜索表单-->
  <el-form :inline="true" :model="news1" class="demo-form-inline">

    <el-form-item label="标题">
      <el-input v-model="news1.title" placeholder="标题"></el-input>
    </el-form-item>

    <el-form-item label="类别">
      <el-input v-model="news1.category" placeholder="类别"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <!--按钮-->

  <el-row>

    <el-button type="danger" plain @click="deleteByids">批量删除</el-button>
    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

  </el-row>

  <!--表格-->
  <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              type="index"
              width="50">
      </el-table-column>

      <el-table-column
              prop="title"
              label="标题"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="author"
              label="作者"
              align="center"
      >
      </el-table-column>
      <el-table-column
              prop="state"
              align="center"
              label="状态">
      </el-table-column>
      <el-table-column
              prop="category"
              align="center"
              label="类别">
      </el-table-column>
      <el-table-column
              prop="content"
              align="center"
              label="内容">
      </el-table-column>
      <el-table-column
              prop="view_count"
              align="center"
              label="浏览次数">
      </el-table-column>

      <el-table-column
              fixed="right"
              label="操作"
              width="100">
        <template slot-scope="scope">

          <el-button plain @click="bianji(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </template>

  <!--分页工具条-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
  </el-pagination>

</div>


<script src="../asset/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../asset/js/axios-0.18.0.js"></script>
<script>
  new Vue({
    el: "#app",
    mounted(){

      this.selectAll();
    },
    methods: {
      selectAll(){
        var  _this=this;
        axios({
          method:"post",
          url:"http://localhost:8080/01_46_luowei_war/news/selectByPageAndCondition?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize+"",
          data:_this.news1
        }).then(function (resp){
          _this.tableData= resp.data.rows;
          _this.totalCount=resp.data.totalCount;
        })
      },

      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;

        console.log(this.multipleSelection)
      },
      // 查询方法
      onSubmit() {

        this.selectAll();
      },
      bianji(row){
        var _this=this;
        _this.dialogVisible1 = true;
        this.news=row;
      },
      del(row){
        var _this=this;

        axios({
          method: "post",
          url: "http://localhost:8080/01_46_luowei_war/news/deleteByid",
          data: row.id,
        }).then(function (resp){
          if (resp.data==="success"){
            _this.selectAll();
            _this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            });
          }
        })
      },
      //分页
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.selectAll()
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.currentPage=val;
        this.selectAll()
      },
      deleteByids(){//批量删除
        var _this=this;
        for (let i=0;i<this.multipleSelection.length;i++){
          let selection= this.multipleSelection[i];
          this.selectedIds[i]=selection.id;
        }
        axios({
          method: "post",
          url: "http://localhost:8080/01_46_luowei_war/news/deleteByids",
          data: _this.selectedIds
        }).then(function (resp){
          if (resp.data==="success"){
            _this.selectAll();
            _this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            });
          }
        })
      }
    },
    data() {
      return {
        tableData:[],
        //总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        pageSize: 5,
        // 添加数据对话框是否展示的标记
        dialogVisible: false,

        // 品牌模型数据
        news: {
          id:"",
          title: '',
          author: '',
          state: '',
          category:"",
          interest:"",
          content:"",
          view_count:""
        },
        news1: {
          id:"",
          title: '',
          author: '',
          state: '',
          category:"",
          interest:"",
          content:"",
          view_count:""
        },
        selectedIds:[],
        // 复选框选中数据集合
        multipleSelection: [],

      }
    }
  })
  var Main = {
    methods: {
      goBack() {
        console.log('go back');
        window.location.href="../index.jsp";
      }
    }
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app1')
</script>

</body>
</html>
